<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link type="text/css" rel="stylesheet" href="../css/mui.css" />
		<link type="text/css" rel="stylesheet" href="../css/signin.css" />
		<link type="text/css" rel="stylesheet" href="../css/iconfont.css" />
		<link href="../css/mui.picker.css" rel="stylesheet" />
    	<link href="../css/mui.poppicker.css" rel="stylesheet" />
		<title></title>
	</head>
	<body>
		<header style="background: #005aab;" class="mui-bar mui-bar-nav head">
			<span class="mui-icon mui-icon-back"></span>
			<h1 style="color: #FFFFFF; letter-spacing: 4px;" class="mui-title">注册</h1>
			<span class="mui-icon mui-icon-more"></span>
		</header>
		<div class="mui-content">
			<div class="mui-input-group">
			    <div class="mui-input-row">
			        <label>姓名</label>
			        <input type="text" class="mui-input-clear" placeholder="请输入您的姓名">
			    </div>
			    <div class="mui-input-row">
			        <label>身份证</label>
			        <input type="text" class="mui-input-clear" placeholder="请输入18位身份证号码">
			    </div>
			    <div class="mui-input-row" id="more_input">
			        <label>所属支行</label>
			        <input id="showCityPicker3" style="width: 19%; padding: 0;padding-left: 5px;" type="text" class="mui-input-clear" placeholder="区">
			        <div class="diqu">市</div>
			        <input id="showCityPicker2" style="width: 19%; padding: 0;padding-left: 5px;" type="text" class="mui-input-clear" placeholder="市">
			        <div class="diqu">省</div>
			        <input id="showCityPicker1" style="width: 19%; padding: 0;padding-left: 5px;" type="text" class="mui-input-clear" placeholder="省">
			    </div>
			    <div class="mui-input-row">
			        <label>服务机构</label>
			        <select>
			      		<option>点击选择所属机构</option>
			      		<option>1</option>
			      		<option>2</option>
			      		<option>3</option>
			      	</select>
			    </div>
			    <div class="mui-input-row">
			        <label>部门</label>
			        <select>
			      		<option>点击选择所属部门</option>
			      		<option>卡部</option>
			      		<option>技术部</option>
			      		<option>商务部</option>
			      	</select>
			    </div>
			    <div class="mui-input-row">
			        <label>领导</label>
			        <input type="text" class="mui-input-clear" placeholder="请输入直属上级领导手机号">
			    </div>
			    <div class="mui-input-row">
			        <label>手机号</label>
			        <input type="text" class="mui-input-clear" placeholder="用于登入和找回密码">
			    </div>
			     <div class="mui-input-row" style="position: relative;">
			        <label>验证码</label>
			        <input type="text" class="mui-input-clear" placeholder="请输入验证码">
			        <input id="btns" value="发送" type="button" style="position: absolute; top: 0px;right:0px;width: 25%; height: 88%; font-size: 14px; padding: 2px 12px; background: #007AFF;color: #FFFFFF;border-radius: 4px;">
			    </div>
			    <div class="mui-input-row">
			        <label>密码</label>
			        <input type="password" class="mui-input-clear" placeholder="请输入数字加字母密码">
			    </div>
			    <div class="mui-input-row">
			        <label>确认密码</label>
			        <input type="password" class="mui-input-clear" placeholder="请输入数字加字母密码">
			    </div>
			    <div class="annue">
			    	<button type="button" class="mui-btn mui-btn-primary">注册</button>
			    </div>
			</div>
		</div>
	</body>
	<script src="../js/jquery1.9.1.js"></script>
	<script src="../js/mui.js"></script>
	<script src="../js/mui.picker.js"></script>
	<script src="../js/mui.poppicker.js"></script>
	<script src="../js/city.data.js" type="text/javascript" charset="utf-8"></script>
	<script src="../js/city.data-3.js" type="text/javascript" charset="utf-8"></script>
	<script>
		mui.init();
	</script>
	<script>
		(function($, doc) {
			$.init();
			$.ready(function() {
				var cityPicker3 = new $.PopPicker({
					layer: 3
				});
				cityPicker3.setData(cityData3);
				var show_sheng = doc.getElementById('showCityPicker1');
				var show_shi=doc.getElementById('showCityPicker2');
				var show_qu=doc.getElementById('showCityPicker3');
				var more_input=document.getElementById("more_input");
				var listinput=more_input.getElementsByClassName("mui-input-clear");
				for(var i=0;i<listinput.length;i++){
					listinput[i].addEventListener('tap',function(event) {
					cityPicker3.show(function(items) {
//							show_sheng.value=(items[0] || {}).text + " " + (items[1] || {}).text + " " + (items[2] || {}).text;
						sheng=(items[0] || {}).text;
						shi=(items[1] || {}).text;
						qu=(items[2] || {}).text;
						if(sheng.indexOf("省")>0){
							show_sheng.value=sheng.substring(0, sheng.lastIndexOf('省'));
						}else{
							show_sheng.value=sheng
						};
						if(show_shi.value.indexOf("市")>0){
							show_shi.value=shi.substring(0, shi.lastIndexOf('市'));
						}else{
							show_shi.value=(items[1] || {}).text;
						};
						if(qu==""){
							show_qu.value=''
						}else{
							show_qu.value=qu
						};
						//返回 false 可以阻止选择框的关闭
//							return false;
					});
				}, false);
				}

			});
		})(mui, document);
	</script>
	<script type="text/javascript">
		$(function(){
			var aaa=$("#btns")
			var countdown=60;
			$(aaa).bind({
				onclick:settime(),
				onclick:aaaa()
			});
			function settime() {
			if (countdown == 0) { 
				aaa.removeAttribute("disabled");
				aaa.value="重新发送"; 
				countdown = 60;
				return
			} else { 
				aaa.setAttribute("disabled", true); 
				aaa.value= countdown +"  s"; 
				countdown--; 
			} 
			setTimeout(function() {
				settime() 
			},1000)
		}
		function aaaa(){
			alert("D")
		}
		})
		
	</script> 
</html>
